import React, { Fragment } from "react";
// import { HashRouter as Router, Route, Link, Switch } from 'react-router-dom';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import $ from "jquery";
import { NavLink } from "react-router-dom";

const Home = () => {
    return <h1>Home</h1>
}
const News = (props) => {
    console.log(props);
    return <h1>{props.match.params.tab}</h1>

}
const About = (props) => {
    console.log(props);
    return (
        <>
            <h1>About</h1>
            {/* <Fragment dangerouslySetInnerHTML={{__html:props.location.state.content}}></Fragment> */}
            {/* 占位循环 */}
            <Fragment key="100Nav">
                hello
            </Fragment>
            
        </>
    )
}



const App = () => {
    return (
        // 如果报错router只有一个子元素，就加div
        <Router>
            <div>
                <header>
                    {/* Link相当于，加入页码 */}
                    <NavLink exact activeStyle={{backgroundColor:'aqua'}}to='/'>首页</NavLink>
                    <br />
                    <NavLink activeStyle={{backgroundColor:'aqua'}}to={{
                        pathname: '/about',
                        state: { id: 11, content: '<h2>帖子详情</h2>' }
                    }}>关于</NavLink>
                    <br />
                    <NavLink activeStyle={{backgroundColor:'aqua'}}to='/news' >新闻</NavLink>
                    <br />
                    <NavLink activeStyle={{backgroundColor:'aqua'}}to='/user'>用户</NavLink>
                </header>
                {/* Switch会显示匹配成功的第一个 */}
                <Switch>
                    {/* exact为精确匹配：有/的时候，只显示Home，不显示News */}
                    <Route exact path='/' component={Home}></Route>
                    <Route path='/about' component={About}></Route>
                    <Route path='/:tab' component={News} ></Route>
                </Switch>
            </div>
        </Router>
    )

}

export default App;